<template>
	<view class="company uni-column">
		<view class="company-title uni-center">
			<text class="uni-h4">请选择公司</text>
		</view>
		<view class="company-item">
			<block v-for="(list,index) in companyList" :key="index">
				<view class="uni-list-cell uni-collapse">
					<view class="uni-list-cell-navigate uni-navigate-bottom" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
						{{list.name}}
					</view>
					<view class="uni-collapse-content" :class="list.show ? 'uni-active' : ''">
						<view>
							<view class="uni-list">
								<view class="uni-list-cell" 
								hover-class="uni-list-cell-hover"
								v-for="(item,itemIndex) in list.children" 
								:key="itemIndex"
								@tap="handleClick(item)">
									<view class="uni-list-cell-navigate uni-navigate-right">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>               
		</view>
	</view>
</template>

<script>
	import vuePinYin from "@/common/vue-pinyin.js"
	import {apicompanyContact} from '@/common/api.js'
	export default{
		name:"company",
		data(){
			return{
				companyList:[]
			}
		},
		onLoad() {
			this.getCompanyList()
		},
		methods:{
			//请求公司列表
			getCompanyList(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				apicompanyContact().then((res)=>{
					uni.hideLoading()
					this.companyList = res.data.data.map(item=>{
						if(item.children.length>0){
							item.children.map(item2=>{
								item2.show=false
							})
						}
						item.show=false
						return item
					})
				}).catch(err=>{
					console.log(err)
				})
			},
			handleClick(items){
				let fristChar=''
				let fristCharArr=[]
				let phone={}
				let phones={}
				items.children.forEach(item=>{
					phone={
						id:item.id,
						name:item.name,
						spell:vuePinYin.chineseToPinYin(item.name),
						phoneNumber:item.phone
					}
					fristChar=vuePinYin.chineseToPinYin(item.name)[0]
					if(fristCharArr.indexOf(fristChar)==-1){
						fristCharArr.push(fristChar)
						if(!phones[fristChar]){
							phones[fristChar]=[]
						}
						phones[fristChar].push(phone)
						fristChar=''
					}
				})
				uni.navigateTo({
					url:'phones/phones?item='+JSON.stringify(phones)
				})
			},
			 trigerCollapse(e) {
				 this.companyList.forEach((item,index)=>{
					 if(index==e){
						 item.show=!item.show
					 }else{
						 item.show=false
					 }
				 })
			},
			trigerCollapse2(selectIndex,e) {
				 this.companyList.forEach((item,index)=>{
					 if(index==selectIndex){
						 item.children.forEach((item2,index2)=>{
							 if(index2==e){
								 item2.show=!item2.show
							 }else{
								 item2.show=false
							 }
						 })
						 
					 }
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.company{
		width: 100%;
		display: flex;
	}
	.company-title{
		background-color: #fff;
		padding: 30upx 0;
		position: relative;
	}
	.company-title:after{  //  单边框
    content: '';
    position: absolute;
	left: 0;
    bottom: 0;
    background: #bbb;
    width: 100%;
    height: 1upx;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
	}
	.nav{
		width: 100%;
	}
	.company-item{
		background-color:#fff;
	}
</style>
